<template>
  <div id="scroll-bar">
    <div class="drag-bar" ref="dragBarRef"></div>
  </div>
</template>

<script>
export default {
  name: 'ScrollBar',
  props: {
    allHeight: {
      type: Number
    },
    visibleHeight: {
      type: Number
    }
  },
  computed: {
    dragBarHeight () {
      return (this.visibleHeight / this.allHeight) * this.visibleHeight
    }
  },
  mounted () {
    this._setHeight()
  },
  methods: {
    _setHeight () {
      this.$nextTick(() => {
        // 这里要加px!!
        this.$refs.dragBarRef.style.height = (this.visibleHeight / this.allHeight) * this.visibleHeight + 'px'
      })
    }
  }
}
</script>

<style scoped lang="less">
#scroll-bar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  .drag-bar {
    width: 100%;
    background-color: #e1e1e2;
    border-radius: 10px;
    &:hover {
      background-color: #cfcfd1;
    }
  }
}
</style>
